<template>
  <div class="admin-dashboard">
    <h2>数据看板</h2>
    <div class="summary-cards">
      <el-card class="summary-card">
        <div>平台总销售额</div>
        <div class="summary-value">￥{{ summary.totalSales }}</div>
      </el-card>
      <el-card class="summary-card">
        <div>订单数</div>
        <div class="summary-value">{{ summary.orderCount }}</div>
      </el-card>
      <el-card class="summary-card">
        <div>用户数</div>
        <div class="summary-value">{{ summary.userCount }}</div>
      </el-card>
      <el-card class="summary-card">
        <div>商品数</div>
        <div class="summary-value">{{ summary.productCount }}</div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import request from '@/utils/request';

const summary = ref({
  totalSales: 0,
  orderCount: 0,
  userCount: 0,
  productCount: 0
});

const fetchSummary = async () => {
  try {
    const res = await request.get('/api/admin/dashboard/summary');
    summary.value = res;
  } catch (e) {
    // 可选：错误提示
  }
};

onMounted(fetchSummary);
</script>

<style scoped>
.admin-dashboard {
  padding: 32px;
}
.summary-cards {
  display: flex;
  gap: 24px;
  margin: 32px 0;
}
.summary-card {
  flex: 1;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  text-align: center;
  padding: 32px 0;
}
.summary-value {
  font-size: 2.2em;
  font-weight: bold;
  margin-top: 12px;
  color: #409EFF;
}
</style> 